<template>
	<view class="page_body">

		<view class="user_head">

			<view class="user_avatar_box">
				<image class="user_avatar" :src="userInfo.avatar" mode="aspectFill"></image>
				<image class="user_take_picture" @click="selectCover()" src="/static/icon/user_center/icon_take_picture.png"></image>
			</view>

			<view class="user_code_box" @click="copyCode">
				<text class="user_code">ID：</text>
				<text class="user_code">{{userInfo.username}}</text>
			</view>
		</view>




		<view class="line_1"></view>
		<view class="edit_item">
			<text class="edit_left">昵称</text>
			<view class="edit_right" @click="openPopup('displayName')">
				<text class="edit_text">{{userInfo.displayName}}</text>
				<image class="icon_more" src="/static/icon/user_center/icon_more.png"></image>
			</view>
		</view>

		<view class="edit_item">
			<text class="edit_left">性别</text>
			<view class="edit_right" @click="openPicker('sex')">
				<text class="edit_text">{{userInfo.sex}}</text>
				<image class="icon_more" src="/static/icon/user_center/icon_more.png"></image>
			</view>
		</view>

		<view class="edit_item">
			<text class="edit_left">生日</text>
			<view class="edit_right" @click="showBirthday = true">
				<text class="edit_text">{{userInfo.birthday}}</text>
				<image class="icon_more" src="/static/icon/user_center/icon_more.png"></image>
			</view>
		</view>

		<view class="edit_item">
			<text class="edit_left">星座</text>
			<view class="edit_right" @click="openPicker('constellation')">
				<text class="edit_text">{{userInfo.constellation}}</text>
				<image class="icon_more" src="/static/icon/user_center/icon_more.png"></image>
			</view>
		</view>

		<view class="edit_item">
			<text class="edit_left">签名</text>
			<view class="edit_right_more" @click="openPopup('introduction')">
				<text class="edit_text_more edit_text_none">{{userInfo.introduction?userInfo.introduction:'这个人很懒，什么都没有写~'}}</text>
				<image class="icon_more" src="/static/icon/user_center/icon_more.png"></image>
			</view>
		</view>
		
		<view class="line_1"></view>
		<view class="edit_item">
			<text class="edit_left">地区</text>
			<view class="edit_right" @click="openCity()">
				<text class="edit_text">{{userInfo.address}}</text>
				<image class="icon_more" src="/static/icon/user_center/icon_more.png"></image>
			</view>
		</view>


	
		<u-popup :show="showPopup" :round="10" mode="bottom" @close="showPopup = false">
			<view style="width: 750rpx;height: 80vh;">
				<view style="margin: 14px;text-align: center;font-size: 15px;">{{popupType === 'displayName'?'昵称':'个人签名'}}</view>
				
				<view style="padding: 30px;">
					<u--input v-if="popupType == 'displayName'" :placeholder="userInfo.displayName" shape="circle" border="surround" clearable
							 v-model="tempData.displayName"	:maxlength="20" inputAlign="center" :focus="true"></u--input>
							 
					<u--textarea v-if="popupType == 'introduction'" v-model="tempData.introduction"  :focus="true" height="140" 
							placeholder="请输入内容" count :maxlength="150"></u--textarea>		 
				</view>
		
				
				<view style="margin: 30px;">
					<u-button text="保存"  type="primary" shape="circle" @click="savePopupData()"></u-button>
				</view>
				
			</view>
			
			
		</u-popup>
		
		
		<!-- 选择器 -->
		<u-picker :show="showPicker" ref="picker" :title="pickerTitle" :columns="pickerList" @confirm="pickerConfirm"
			@close="showPicker = false" @cancel="showPicker = false" closeOnClickOverlay></u-picker>


		<!-- 日期选择 -->
		<u-datetime-picker v-model="currentDate" title="选择你的生日" ref="datetimePicker" :show="showBirthday"  mode="date" closeOnClickOverlay
			:minDate="-639129600" @close="birthdayClose" @cancel="birthdayClose" @confirm="birthdaySelect">
		</u-datetime-picker>
		
		
		<!-- 城市选择 -->
		<city-picker themeColor="#007AFF" ref="cityPicker"  @onConfirm="confirmCity">
		</city-picker>
		

	</view>
</template>

<script>
	import {toUpload,getFileMD5} from '@/util/fileUtil.js';
	export default {
		components: {},
		data() {
			return {
				hasLogin: false,
				// 用户信息
				userInfo: {
					// 用户id
					username: '',
					// 头像
					avatar: '',
					// 昵称
					displayName: '',
					// 性别
					sex: '',
					// 生日
					birthday: '',
					// 星座
					constellation: '',
					// 签名
					introduction: '',
					// 地址
					address: ''
				},
				// 临时数据
				tempData:{
					// 昵称
					displayName: '',
					// 签名
					introduction: '',
				},
				// 是否显示弹出层
				showPopup: false,
				// 弹出层类型
				popupType: 'displayName',
				// 选择器是否显示
				showPicker: false,
				// 选择器类型
				pickerType: '',
				// 选择器标题
				pickerTitle: '',
				// 选择器数据
				pickerList: [],
				// 生日选择
				showBirthday: false,
				currentDate: '',
			}
		},
		onShow() {
			this.hasLogin = this.$authUtil.isLoginedin()
			if(!this.hasLogin){
				uni.navigateBack()
			}
			this.getUerInfo()
		},
		methods: {
			// 获取用户信息
			getUerInfo(){
				this.$httpApi.baseUserGet('open/user/getCurrentInfo',{}).then(({ data }) => {
					if (data.code == "000000") {
						if(data.data.sex == 0){
							this.userInfo.sex = '女'
						}else if(data.data.sex == 1){
							this.userInfo.sex = '男'
						}else {
							this.userInfo.sex = ''
						}
						this.userInfo.username =  data.data.username
						this.userInfo.avatar =  data.data.avatar
						this.userInfo.displayName =  data.data.displayName
						this.userInfo.birthday =  data.data.birthday
						this.userInfo.constellation =  data.data.constellation
						this.userInfo.introduction =  data.data.introduction
						this.userInfo.address = data.data.address
					} else {
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
					}
				}).catch(err => {
				})
			},
			//复制 用户ID号码
			copyCode() {
				uni.setClipboardData({
					data: this.userInfo.username,
					success() {
						uni.showToast({
							title: '已复制到剪切板',
							icon: "none"
						})
					}
				})
			},
			// 选择图片
			selectCover() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album'],
					success: async function(res) {
						res.tempFiles[0].MD5 = await getFileMD5(res.tempFiles[0])
						that.doUploadFile(res.tempFiles[0])		
					}
				});
			},
			// 上传文件
			async doUploadFile(file){
				uni.showLoading({
					title: '上传中'
				});
				let {data} = await toUpload(file).catch(()=>{uni.hideLoading()})
				if (data.code == "000000") {
					let form = {
						updateType: '1',
						avatar: data.data.id
					}
					let r = await this.doUpdate(form)
					if(r){
						this.userInfo.avatar = data.data.url
						this.$store.commit("Set_Some_Login_Info",{column:'avatar',data:data.data.url});
					}
				} else {
					this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
				}	
				uni.hideLoading()
			},
			// 打开弹出层
			openPopup(type){
				this.popupType = type
				this.tempData.displayName = this.userInfo.displayName
				this.tempData.introduction = this.userInfo.introduction?this.userInfo.introduction:''
				this.showPopup = true
			},
			// 保存昵称和
			async savePopupData(){
				// 昵称
				if (this.popupType === 'displayName'){
					if (this.tempData.displayName && this.tempData.displayName.length > 1){
						let form = {
							updateType: '2',
							displayName: this.tempData.displayName
						}
						let r = await this.doUpdate(form)
						if(r){
							this.userInfo.displayName = this.tempData.displayName
						}
					}
				}
				// 签名
				else if (this.popupType === 'introduction'){
					let form = {
						updateType: '5',
						introduction: this.tempData.introduction
					}
					let r = await this.doUpdate(form)
					if(r){
						this.userInfo.introduction = this.tempData.introduction
					}
				}
				this.showPopup = false
			},
			// 生日选择确定
			async birthdaySelect(e) {
				const timeFormat = uni.$u.timeFormat
				let b = timeFormat(e.value, 'yyyy-mm-dd')
				let c = this.getConstellation(b.slice(5,7),b.slice(8,10))
				let form = {updateType: '4',birthday: b,constellation:c}
				let r = await this.doUpdate(form)
				if(r){
					this.userInfo.birthday = b
					this.userInfo.constellation = c
				}
				this.showBirthday = false
			},
			// 根据生日的月份和日期，计算星座。
		    getConstellation(month,day){
			  var s="魔羯水瓶双鱼牡羊金牛双子巨蟹狮子处女天秤天蝎射手魔羯";
			  var arr=[20,19,21,21,21,22,23,23,23,23,22,22];
			  return s.substr(month*2-(day<arr[month-1]?2:0),2)+'座'
			},

			// 生日选择关闭
			birthdayClose() {
				this.showBirthday = false
			},
			// 打开性别和星座选择器
			openPicker(type){
				this.pickerType = type
				if(type === 'sex'){
					this.pickerTitle = '选择性别'
					this.pickerList = [['男', '女']]
					this.showPicker = true
				}
				if(type === 'constellation'){
					this.pickerTitle = '选择星座'
					this.pickerList = [['水瓶座', '双鱼座', '白羊座', '金牛座', 
										'双子座', '巨蟹座', '狮子座', '处女座', 
										'天秤座', '天蝎座', '射手座', '摩羯座']]
					this.showPicker = true
				}
				
			},
			// 性别和星座选择器确定
			async pickerConfirm(e){
				let form = {}
				if (this.pickerType === 'sex'){
					form = {updateType: '3',sex: e.value[0] == '男'?1:0}
				}
				if (this.pickerType === 'constellation'){
					form = {updateType: '4',sex: e.value[0]}
				}
				let r = await this.doUpdate(form)
				if(r){
					if (this.pickerType === 'sex'){
						this.userInfo.sex = e.value[0]
					}
					if (this.pickerType === 'constellation'){
						this.userInfo.constellation = e.value[0]
					}
				}
				this.showPicker = false
			},
			// 地区选择
			openCity() {
				this.tempData.address = this.userInfo.address
				this.$refs.cityPicker.show()
			},
			// 地区选择确定
			async confirmCity(e) {
				if(!e.cityCode){
					return
				}
				let form = {
					updateType: '6',
					address: e.label
				}
				let r = await this.doUpdate(form)
				if(r){
					this.userInfo.address = e.label
				}
			},
			// 保存
			async doUpdate(form){
				if (this.submiting){
					return false
				}
				let result = false 
				uni.showLoading({
					title: '保存中'
				});
				this.submiting = true;
				await this.$httpApi.baseUserPut('user/update',form).then(({data}) => {
					if (data.code == "000000") {
						this.$store.dispatch('getUserInfo')
						result = true
						this.$refs.uToast.show({type: 'success',icon: false,message: '修改成功'})
					} else {
						this.$refs.uToast.show({type: 'error',icon: false,message: data.mesg})
					}
					uni.hideLoading()
					this.submiting = false;
				}).catch(err => {
					uni.hideLoading()
					this.submiting = false;
				})
				return result 
			}
			

		}
	}
</script>

<style>
	.user_head {
		display: flex;
		padding: 15px 10px;
		align-items: center;
		flex-direction: column;
	}

	.user_avatar_box {
		position: relative;
		justify-content: center;
		flex-direction: row;
		margin-bottom: 15px;
		width: 80px;
	}


	.user_avatar {
		width: 80px;
		height: 80px;
		border-radius: 80px;
	}

	.user_take_picture {
		width: 25px;
		height: 25px;
		position: absolute;
		right: 0px;
		bottom: 0px;
		border-width: 1px;
		border-color: #FFFFFF;
		border-radius: 20px;
	}

	.user_code_box {
		border-radius: 20px;
		border-width: 1px;
		border-color: #bcbcbc;
		padding: 3px 10px;
	}

	.user_code {
		font-size: 13px;
		color: #999;
	}

	.edit_item {
		display: flex;
		flex-direction: row;
	}

	.edit_left {
		width: 150upx;
		font-size: 16px;
		text-align: center;
		color: #333333;
		height: 20px;
		line-height: 20px;
		padding: 15px 0;
	}

	.edit_right {
		display: flex;
		flex-direction: row;
		border-bottom-width: 1px;
		border-bottom-color: #F8F8F8;
		flex: 1;
		height: 20px;
		line-height: 20px;
		padding: 15px 5px;
		border-bottom: #efefef solid 1px;

	}

	.icon_more {
		margin-right: 5px;
		width: 20px;
		height: 20px;
	}

	.edit_text {
		flex: 1;
		font-size: 16px;
		color: #333333;
		display: -webkit-box;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.edit_right_more {
		display: flex;
		flex-direction: row;
		border-bottom-width: 1px;
		border-bottom-color: #F8F8F8;
		flex: 1;
		max-height: 40px;
		line-height: 20px;
		padding: 15px 5px;
		border-bottom: #efefef solid 1px;
	
	}
	.edit_text_more{
		flex: 1;
		font-size: 16px;
		color: #333333;
		display: -webkit-box;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.edit_text_none {
		color: #999;
	}

	.line_1 {
		height: 5px;
		background-color: #efefef;
	}
</style>
